<template>
  <div class="open-doc">
    <h1>隐厨项目菜品列表开放文档</h1>
    <section id="overview">
      <h2>一、概述</h2>
      <p>本开放文档用于帮助开发者接入隐厨项目的菜品列表数据。通过调用提供的 API，开发者可以获取丰富的菜品信息，包括菜品名称、价格、描述、图片等，方便集成到自己的应用中。</p>
    </section>
    <section id="access-way">
      <h2>二、接入方式</h2>
      <h3>1. 引入依赖</h3>
      <p>你可以使用 npm 或者 yarn 安装必要的依赖。以下是使用 npm 安装的示例：</p>
      <pre><code>npm install axios</code></pre>
      <h3>2. 引入依赖</h3>
      <pre><code>下文的https://api.example.com/替换为当站的域名</code></pre>
      <h3>3. 调用 API</h3>
      <p>使用 `axios` 发送 HTTP 请求来获取菜品列表数据。示例代码如下：</p>
      <pre><code class="language-js">import axios from 'axios';

const fetchDishes = async () => {
  try {
    const response = await axios.get('https://api.example.com/dishe/list');
    console.log(response.data);
  } catch (error) {
    console.error('获取菜品列表失败:', error);
  }
};

fetchDishes();</code></pre>
    </section>
    <section id="api-doc">
      <h2>三、API 文档</h2>
      <h3>1. 获取菜品列表</h3>
      <p><strong>请求 URL：</strong> <code>https://api.example.com/dishe/list</code></p>
      <p><strong>请求方法：</strong> GET</p>
      <p><strong>请求参数：</strong> 无</p>
      <p><strong>响应数据：</strong></p>
      <pre><code class="language-json">[
  {
    "id": 1,
    "name": "宫保鸡丁",
    "price": 28,
    "description": "经典川菜，鸡肉鲜嫩，花生米香脆",
    "image": "https://example.com/gongbao-jiding.jpg"
  },
  {
    "id": 2,
    "name": "鱼香肉丝",
    "price": 25,
    "description": "酸甜可口，肉丝嫩滑",
    "image": "https://example.com/yuxiang-rousi.jpg"
  }
]</code></pre>
    </section>
    <section id="faq">
      <h2>四、常见问题解答</h2>
      <h3>1. 如何处理 API 请求失败的情况？</h3>
      <p>在使用 `axios` 发送请求时，可以通过 `catch` 块捕获错误并进行相应的处理，如显示错误提示信息。</p>
      <h3>2. 菜品图片无法显示怎么办？</h3>
      <p>请检查图片链接是否有效，或者联系我们的技术支持团队。</p>
    </section>
  </div>
</template>

<script setup>
// 这里可以添加逻辑，如果需要的话
</script>

<style scoped>
.open-doc {
  display: flex;
  flex-direction: column;
  margin: 2% auto;
  width: 95%;
  background-color: #f8f9fa;
  border-radius: 2%;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  position: relative;
}
.open-doc {
  font-family: Arial, sans-serif;
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

h1 {
  text-align: center;
  color: #333;
}

h2 {
  margin-top: 40px;
  color: #555;
}

h3 {
  margin-top: 20px;
  color: #777;
}

pre {
  background-color: #f4f4f4;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow-x: auto;
}

code {
  font-family: 'Courier New', Courier, monospace;
}
</style>